import * as echarts from 'echarts'

export const lineOption = {
   color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
   title: {
      text: '用户文章统计'
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'cross',
         label: {
            backgroundColor: '#6a7985'
         }
      }
   },
   legend: {
      data: ['前端', '后端', 'vue', ' react', ' nestJS']
   },
   toolbox: {
      feature: {
         saveAsImage: {}
      }
   },
   grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
   },
   xAxis: [
      {
         type: 'category',
         boundaryGap: false,
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
   ],
   yAxis: [
      {
         type: 'value'
      }
   ],
   series: [
      {
         name: '前端',
         type: 'line',
         stack: 'Total',
         smooth: true,
         lineStyle: {
            width: 0
         },
         showSymbol: false,
         areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
               },
               {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
               }
            ])
         },
         emphasis: {
            focus: 'series'
         },
         data: [140, 232, 101, 264, 90, 340, 250]
      },
      {
         name: '后端',
         type: 'line',
         stack: 'Total',
         smooth: true,
         lineStyle: {
            width: 0
         },
         showSymbol: false,
         areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
               },
               {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
               }
            ])
         },
         emphasis: {
            focus: 'series'
         },
         data: [120, 282, 111, 234, 220, 340, 310]
      },
      {
         name: 'vue',
         type: 'line',
         stack: 'Total',
         smooth: true,
         lineStyle: {
            width: 0
         },
         showSymbol: false,
         areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                  offset: 0,
                  color: 'rgb(55, 162, 255)'
               },
               {
                  offset: 1,
                  color: 'rgb(116, 21, 219)'
               }
            ])
         },
         emphasis: {
            focus: 'series'
         },
         data: [320, 132, 201, 334, 190, 130, 220]
      },
      {
         name: ' react',
         type: 'line',
         stack: 'Total',
         smooth: true,
         lineStyle: {
            width: 0
         },
         showSymbol: false,
         areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                  offset: 0,
                  color: 'rgb(255, 0, 135)'
               },
               {
                  offset: 1,
                  color: 'rgb(135, 0, 157)'
               }
            ])
         },
         emphasis: {
            focus: 'series'
         },
         data: [220, 402, 231, 134, 190, 230, 120]
      },
      {
         name: ' nestJS',
         type: 'line',
         stack: 'Total',
         smooth: true,
         lineStyle: {
            width: 0
         },
         showSymbol: false,
         label: {
            show: true,
            position: 'top'
         },
         areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                  offset: 0,
                  color: 'rgb(255, 191, 0)'
               },
               {
                  offset: 1,
                  color: 'rgb(224, 62, 76)'
               }
            ])
         },
         emphasis: {
            focus: 'series'
         },
         data: [220, 302, 181, 234, 210, 290, 150]
      }
   ]
}

export const areaOption = {
   tooltip: {
      trigger: 'item'
   },
   legend: {
      top: '5%',
      left: 'center'
   },
   series: [
      {
         name: 'Access From',
         type: 'pie',
         radius: ['40%', '70%'],
         avoidLabelOverlap: false,
         padAngle: 5,
         itemStyle: {
            borderRadius: 10
         },
         label: {
            show: false,
            position: 'center'
         },
         emphasis: {
            label: {
               show: true,
               fontSize: 40,
               fontWeight: 'bold'
            }
         },
         labelLine: {
            show: false
         },
         data: [
            { value: 1048, name: '前端' },
            { value: 735, name: '后端' },
            { value: 580, name: ' react' },
            { value: 484, name: ' nestJS' },
            { value: 300, name: 'vue' }
         ]
      }
   ]
}

export const radarOption = {
   legend: {
      data: ['男性', '女性']
   },
   radar: {
      // shape: 'circle',
      indicator: [
         { name: '山东', max: 6500 },
         { name: '湖南', max: 16000 },
         { name: '广东', max: 30000 },
         { name: '四川', max: 38000 },
         { name: '河北', max: 52000 },
         { name: '天津', max: 25000 }
      ]
   },
   series: [
      {
         name: '男女分布图',
         type: 'radar',
         data: [
            {
               value: [4200, 3000, 20000, 35000, 50000, 18000],
               name: 'Allocated Budget'
            },
            {
               value: [5000, 14000, 28000, 26000, 42000, 21000],
               name: 'Actual Spending'
            }
         ]
      }
   ]
}

export const categoryOption = {
   tooltip: {},
   angleAxis: [
      {
         type: 'category',
         polarIndex: 0,
         startAngle: 90,
         endAngle: 0,
         data: ['S1', 'S2', 'S3']
      },
      {
         type: 'category',
         polarIndex: 1,
         startAngle: -90,
         endAngle: -180,
         data: ['T1', 'T2', 'T3']
      }
   ],
   radiusAxis: [{ polarIndex: 0 }, { polarIndex: 1 }],
   polar: [{}, {}],
   series: [
      {
         type: 'bar',
         polarIndex: 0,
         data: [1, 2, 3],
         coordinateSystem: 'polar'
      },
      {
         type: 'bar',
         polarIndex: 1,
         data: [1, 2, 3],
         coordinateSystem: 'polar'
      }
   ]
}
